<!DOCTYPE html>
<html>
<head>
    <title>二分查找动画演示</title>
    <style>
        :root {
            --left-color: #e74c3c;
            --right-color: #3498db;
            --mid-color: #2ecc71;
            --found-color: #f1c40f;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: #ecf0f1;
            font-family: Arial, sans-serif;
        }
        #container {
            background: white;
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            width: 90%;
            max-width: 1000px;
        }
        .array-container {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
            position: relative;
            min-height: 150px;
        }
        .element {
            width: 60px;
            height: 100px;
            margin: 0 5px;
            background: #bdc3c7;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            color: white;
            transition: all 0.3s;
            position: relative;
        }
        .element.left {
            border-left: 4px solid var(--left-color);
            box-shadow: -2px 0 8px rgba(231, 76, 60, 0.3);
        }
        .element.right {
            border-right: 4px solid var(--right-color);
            box-shadow: 2px 0 8px rgba(52, 152, 219, 0.3);
        }
        .element.mid {
            background: var(--mid-color);
            transform: scale(1.1);
        }
        .element.found {
            background: var(--found-color);
            animation: pop 0.5s;
        }
        .controls {
            display: grid;
            grid-template-columns: repeat(3, 1fr) 150px;
            gap: 1rem;
            align-items: center;
        }
        button {
            padding: 0.8rem;
            border: none;
            border-radius: 6px;
            background: #3498db;
            color: white;
            cursor: pointer;
            transition: 0.3s;
        }
        button:hover {
            opacity: 0.9;
        }
        button:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
        }
        .status {
            text-align: center;
            margin: 1rem 0;
            font-size: 1.1rem;
        }
        @keyframes pop {
            50% { transform: scale(1.2); }
        }
    </style>
</head>
<body>
<div id="container">
    <div class="status" id="status">准备就绪</div>
    <div class="array-container" id="array"></div>
    <div class="controls">
        <button onclick="start()" id="startBtn">开始</button>
        <button onclick="pause()" id="pauseBtn" disabled>暂停</button>
        <button onclick="reset()" id="resetBtn">重置</button>
        <div>
            <input type="range" id="speed" min="100" max="2000" value="800" 
                   oninput="updateSpeed(this.value)">
            <div>速度: <span id="speedValue">800</span>ms</div>
        </div>
    </div>
</div>

<script>
const config = {
    array: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49],
    target: 9,
    speed: 800,
    animation: null,
    currentStep: 0,
    steps: []
};

function initializeSteps() {
    let left = 0;
    let right = config.array.length - 1;
    config.steps = [];
    
    while (left <= right) {
        const mid = Math.floor((left + right) / 2);
        // 记录中间步骤
        config.steps.push({ type: 'calc_mid', left, right, mid });
        
        if (config.array[mid] === config.target) {
            config.steps.push({ type: 'found', index: mid });
            break;
        }
        
        if (config.array[mid] < config.target) {
            config.steps.push({ type: 'move_left', from: left, to: mid + 1 });
            left = mid + 1;
        } else {
            config.steps.push({ type: 'move_right', from: right, to: mid - 1 });
            right = mid - 1;
        }
    }
    
    if (left > right) {
        config.steps.push({ type: 'not_found' });
    }
}

function renderArray() {
    const currentStep = config.steps[config.currentStep];
    const elements = config.array.map((num, index) => {
        const classes = ['element'];
        if (currentStep?.left === index) classes.push('left');
        if (currentStep?.right === index) classes.push('right');
        if (currentStep?.mid === index) classes.push('mid');
        if (currentStep?.type === 'found' && index === currentStep.index) {
            classes.push('found');
        }
        return `<div class="${classes.join(' ')}">${num}</div>`;
    });
    document.getElementById('array').innerHTML = elements.join('');
}

function updateStatus() {
    const statusEl = document.getElementById('status');
    const currentStep = config.steps[config.currentStep];
    
    if (!currentStep) return;
    
    switch(currentStep.type) {
        case 'calc_mid':
            statusEl.textContent = `计算中间位置：mid = (${currentStep.left} + ${currentStep.right}) / 2 = ${currentStep.mid}`;
            break;
        case 'move_left':
            statusEl.textContent = `目标在右侧，移动左指针到 ${currentStep.to}`;
            break;
        case 'move_right':
            statusEl.textContent = `目标在左侧，移动右指针到 ${currentStep.to}`;
            break;
        case 'found':
            statusEl.textContent = `找到目标值 ${config.target} 在索引 ${currentStep.index}`;
            break;
        case 'not_found':
            statusEl.textContent = `未找到目标值 ${config.target}`;
            break;
    }
}

function animate() {
    if (config.currentStep >= config.steps.length) return;
    
    renderArray();
    updateStatus();
    
    config.animation = setTimeout(() => {
        config.currentStep++;
        if (config.currentStep < config.steps.length) {
            animate();
        } else {
            document.getElementById('startBtn').disabled = true;
            document.getElementById('pauseBtn').disabled = true;
        }
    }, config.speed);
}

function start() {
    document.getElementById('startBtn').disabled = true;
    document.getElementById('pauseBtn').disabled = false;
    if (config.currentStep >= config.steps.length) reset();
    animate();
}

function pause() {
    clearTimeout(config.animation);
    document.getElementById('startBtn').disabled = false;
    document.getElementById('pauseBtn').disabled = true;
}

function reset() {
    pause();
    config.currentStep = 0;
    initializeSteps();
    renderArray();
    document.getElementById('status').textContent = '准备就绪';
}

function updateSpeed(value) {
    config.speed = value;
    document.getElementById('speedValue').textContent = value;
}

// 初始化
initializeSteps();
renderArray();
</script>
</body>
</html>
